<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
    <head>
        <th:block th:include="include :: header('文档查看')"/>
        <th:block th:include="include :: swiper-css"/>
        <style>
            .pdf-div {
                width: 1000px;
                margin: auto;
            }

            .adds{
                line-height: 2em;
                padding: 4px;
                text-align: center;
                font-weight: bold;
            }

            .media embed {
                -webkit-transform: translate(30px, -50px);
                transform: translate(30px, -50px);
                width: 900px;
                height: 100%;
            }

            .carousel {
                height: 500px;
            }
            .carousel .item {
                height: 500px;
            }
            .carousel .item img {
                width: 100%;
            }

            .swiper-container {
                width: 800px;
                height: auto;
            }
            .swiper-slide img{
                width: 800px;
                height: auto;
            }
            .carousel-caption{
                font-weight: bold;
                font-size: 20px;
                color: red;
                position: absolute;
                bottom: -25px;
                left: 15%;
                z-index: 10;
                padding-top: 29px;
                padding-bottom: 20px;
                text-align: center;
                text-shadow: 0;
            }
</style>
    </head>
    <body class="white-bg">
        <div class="adds">
            <div>[[${courseDetail.title}]]</div>
            <div style="display: none">[[${courseDetail.host + courseDetail.pptUrl}]]</div>
        </div>
        <div>
            <div class="row">
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide" th:each="img,imgStat:${imgList}">
                            <img th:src="${img}">
<!--                            <div class="carousel-caption">[[${imgStat.index+1}]]/[[${imgStat.count}]]</div>-->
                        </div>
                    </div>
                    <!-- 如果需要分页器 -->
<!--                    <div class="swiper-pagination"></div>-->

                    <!-- 如果需要导航按钮 -->
                    <div class="swiper-button-prev"></div>
                    <div class="swiper-button-next"></div>

                    <!-- 如果需要滚动条 -->
<!--                    <div class="swiper-scrollbar"></div>-->
                    <div class="carousel-caption"><span id="current">1</span>/[[${total}]]</div>
                </div>
            </div>

        </div>


        <th:block th:include="include :: footer"/>
        <th:block th:include="include :: swiper-js"/>
        <script type="text/javascript">
            var url = '[[${courseDetail.host + courseDetail.pptUrl}]]'
            var total = [[${total}]]
            console.log('total = '+total)
            var mySwiper = new Swiper ('.swiper-container', {
                direction: 'horizontal', // 切换选项
                loop: false, // 循环模式选项

                // 如果需要分页器
                pagination: {
                    el: '.swiper-pagination',
                },

                // 如果需要前进后退按钮
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },

                // 如果需要滚动条
                scrollbar: {
                    el: '.swiper-scrollbar',
                },
                on: {
                    slideChangeTransitionEnd: function(){
                        const current= this.activeIndex+1
                        console.log(current);//切换结束时，告诉我现在是第几个slide

                        $('#current').html(current)
                    },
                },
            })
        </script>
    </body>
</html>